<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用文本属性_文本对齐_同一行元素</title>
    <style>
        /*
        属性值:vertical-align
        作用:用于指定同一行元素之间,或表格单元格内文字的垂直对齐方式
        baseline:(默认值):使元素的基线与父元素的基线对齐
        top:使元素的顶部与起所在行的顶部对齐
        middle:使元素的中部,与父元素的基线加上父元素字母x的一般对齐
        bottom:使元素的底部与其所在行的底部对齐

        特别注意:vertical-align不能控制块元素
        */

        div {
            font-size: 100px;
            width: 500px;
            height: 300px;
            background-color: pink;
        }

        .one {
            font-size: 40px;
            background-color: orange;
            vertical-align: baseline;
        }

        .two {
            font-size: 40px;
            background-color: orange;
            vertical-align: top;
        }

        .three {
            font-size: 40px;
            background-color: orange;
            vertical-align: middle;
        }

        .four {
            font-size: 40px;
            background-color: orange;
            vertical-align: bottom;
        }
    </style>

</head>
<body>
<div style="text-align: center">
    前端x<span class="one">x前端</span>
</div>
<br>
<div>
    前端x<span class="two">x前端</span>
</div>
<br>
<div>
    前端x<span class="three">x前端</span>
</div>
<br>
<div>
    前端x<span class="four">x前端</span>
</div>
</body>
</html>